<script setup>
import logo from '@/assets/logo/logo.png'
import store from '@/store'
import {useRouter, useRoute} from 'vue-router'

// 定义props
const props = defineProps({
  active: {
    type: Number,
    default: 0
  }
})

const currentUser = store.state.value.user// 当前登录的用户存储状态
const router = useRouter()
const route = useRoute()

const navItems = ref([
  {name: '首页', path: '/house-index', number: 0},
  {name: '所有房源', path: '/all-house', number: 1},
  {name: '我的收藏', path: '/my-collect', number: 2},
  {name: '招租文章', path: '/contact', number: 3},
  {name: '公告', path: '/contact', number: 4},
])

const handleLogin = () => {
  // 获取当前路由
  router.push({
    path: '/login',
    query: {
      redirect: route.fullPath
    }
  })
}
</script>

<template>
  <header class="header">
    <div class="header-logo">
      <img :src="logo" alt="Logo" class="logo"/>
      <h1>房屋租赁系统</h1>
    </div>
    <nav class="header-nav">
      <div v-for="item in navItems" :key="item.name" class="nav-item" :class="{
        active: item.number === props.active
      }">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </div>
    </nav>
    <div class="header-right">
      <div v-if="currentUser && currentUser.id"
           class="nav-item" @click="router.push('/user/profile')">
        个人中心
      </div>
      <div class="nav-item" v-else @click="handleLogin">个人中心</div>
    </div>
  </header>
</template>


<style scoped lang="less">
header {
  display: flex;
  height: 100px;
  padding-left: 50px;
  background: #fff;

  .header-logo {
    display: flex;
    align-items: center;
    margin-right: 50px;
  }

  .header-nav {
    display: flex;
    align-items: center;
  }

  .header-right {
    margin-left: auto;
    padding-right: 50px;
    display: flex;
    align-items: center;
  }

  .nav-item {
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;

    &:hover {
      color: #4bbd92;
    }
  }

  .active {
    color: #4bbd92;
  }
}
</style>
